<template>
	<view class="edit_info_container">
		<u-navbar title="编辑资料" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="base_info">
			<view style="width: 80px;height: 80px;">
				<u-upload :fileList="imageList" @afterRead="afterReadImageFile" :maxCount="1" width="250" height="150"
					class="upload">
					<u-avatar :src="userInfo.avatar" size="80" shape="square"></u-avatar>
				</u-upload>
			</view>
			<view class="name_info">
				<view class="user_name">
					<text>周小凯</text>
					<view class="edit_icon">
						<u-icon color="#FF5678" size="20" name="edit-pen-fill"></u-icon>
					</view>
				</view>
				<view class="user_phone">1787665299</view>
			</view>
		</view>
		<view style="margin: 48rpx;">
			<u--form labelPosition="left" :model="userInfo" ref="uForm" labelWidth="100">
				<u-form-item label="性别" prop="userInfo.gender" borderBottom @click="clickActionEvent('gender')">
					<u--input v-model="genderLabel" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="出生年月" prop="userInfo.birthDate" borderBottom @click="clickActionEvent('birthDate')">
					<u--input v-model="birthDateLabel" disabled disabledColor="#ffffff" placeholder="请选择出生年月"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="身高" prop="userInfo.heightCm" borderBottom>
					<u--input v-model="userInfo.heightCm" disabledColor="#ffffff" placeholder="请输入身高" border="none"></u--input>
					<text slot="right">厘米</text>
				</u-form-item>
				<u-form-item label="体型" prop="userInfo.bodyType" borderBottom @click="clickActionEvent('bodyType')">
					<u--input v-model="bodyTypeLabel" disabled disabledColor="#ffffff" placeholder="请选择体型"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="最高学历" prop="userInfo.highestEducation" borderBottom
					@click="clickActionEvent('highestEducation')">
					<u--input v-model="highestEducationLabel" disabled disabledColor="#ffffff" placeholder="请选择最高学历"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="毕业院校" prop="userInfo.graduationSchool" borderBottom>
					<u--input v-model="userInfo.graduationSchool" disabledColor="#ffffff" placeholder="请输入院校"
						border="none"></u--input>
				</u-form-item>
				<u-form-item label="职业" prop="userInfo.occupation" borderBottom>
					<u--input v-model="userInfo.occupation" disabledColor="#ffffff" placeholder="请输入职业" border="none"></u--input>
				</u-form-item>
				<u-form-item label="收入范围" prop="userInfo.incomeRange" borderBottom @click="clickActionEvent('incomeRange')">
					<u--input v-model="incomeRangeLabel" disabled disabledColor="#ffffff" placeholder="请选择收入范围"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="居住地省份" prop="userInfo.residenceProvinceCode" borderBottom
					@click="clickActionEvent('residenceProvinceCode')">
					<u--input v-model="userInfo.residenceProvinceName" disabled disabledColor="#ffffff" placeholder="请选择居住地省份"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="户籍地省份" prop="userInfo.domicilePlaceProvinceCode" borderBottom
					@click="clickActionEvent('domicilePlaceProvinceCode')">
					<u--input v-model="userInfo.domicilePlaceProvinceName" disabled disabledColor="#ffffff" placeholder="请选择户籍地省份"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="租房情况" prop="userInfo.housingSituation" borderBottom
					@click="clickActionEvent('housingSituation')">
					<u--input v-model="userInfo.housingSituationLabel" disabled disabledColor="#ffffff" placeholder="请选择住房情况"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="购车情况" prop="userInfo.carOwnership" borderBottom @click="clickActionEvent('carOwnership')">
					<u--input v-model="userInfo.carOwnershipLabel" disabled disabledColor="#ffffff" placeholder="请选择购车情况"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="期望关系进度" prop="userInfo.relationshipProgressExpectation" borderBottom
					@click="clickActionEvent('relationshipProgressExpectation')">
					<u--input v-model="userInfo.relationshipProgressExpectationLabel" disabled disabledColor="#ffffff"
						placeholder="请选择期望关系进度" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="兴趣爱好" prop="userInfo.hobbies" borderBottom>
					<u--input v-model="userInfo.hobbies" placeholder="请输入兴趣爱好" border="none"></u--input>
				</u-form-item>
				<u-form-item label="生活习惯" prop="userInfo.livingHabits" borderBottom>
					<u--input v-model="userInfo.livingHabits" placeholder="请输入生活习惯" border="none"></u--input>
				</u-form-item>
				<u-form-item label="我的经历" prop="userInfo.experiences" borderBottom>
					<u--textarea v-model="userInfo.experiences" placeholder="请输入经历" border="none"></u--textarea>
				</u-form-item>
				<u-form-item label="创意自我介绍" prop="userInfo.creativeSelfIntroduction" borderBottom>
					<u--textarea v-model="userInfo.creativeSelfIntroduction" placeholder="请输入自我介绍" border="none"></u--textarea>
				</u-form-item>
			</u--form>
		</view>
		<u-picker :show="isShowPicker" :columns="curActions" keyName="name" :closeOnClickOverlay="true"
			@confirm="confirmPickerEvent" @cancel="isShowPicker = false;" @close="isShowPicker = false;"
			confirmColor="#FF5678"></u-picker>
		<u-datetime-picker :show="isShowDateTime" mode="date" :closeOnClickOverlay="true" @confirm="selectDateTimeEvent"
			@cancel="isShowDateTime = false;" @close="isShowDateTime = false;" confirmColor="#FF5678"></u-datetime-picker>
	</view>
</template>

<script>
	import dayjs from "dayjs";
	export default {
		data() {
			return {
				isShowPicker: false,
				curField: '',
				isShowDateTime: false,
				curDateTime: '',
				userInfo: {
					avatar: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
					lifePhotos: [],
					nickName: '',
					gender: '',
					birthDate: '',
					age: '',
					heightCm: '',
					bodyType: '',
					highestEducation: '',
					graduationSchool: '',
					occupation: '',
					incomeRange: '',
					housingSituation: '',
					carOwnership: '',
					relationshipProgressExpectation: '',
					hobbies: '',
					livingHabits: '',
					experiences: '',
					lovePreferences: '',
					creativeSelfIntroduction: '',
					emotionalExperienceDescription: '',
					expectationsForPartner: '',
					residenceProvinceName: "",
					residenceProvinceCode: "",
					domicilePlaceProvinceName: "",
					domicilePlaceProvinceCode: "",
				},
				genderLabel: '',
				birthDateLabel: '',
				bodyTypeLabel: '',
				highestEducationLabel: '',
				incomeRangeLabel: '',
				housingSituationLabel: '',
				carOwnershipLabel: '',
				relationshipProgressExpectationLabel: '',
				imageList: []
			}
		},
		computed: {
			curActions() {
				const map = {
					gender: this.$Enum.genderArr,
					bodyType: this.$Enum.bodyTypeArr,
					highestEducation: this.$Enum.highestEducationArr,
					incomeRange: this.$Enum.incomeRangeArr,
					residenceProvinceCode: this.$Enum.provinceCodesArr,
					domicilePlaceProvinceCode: this.$Enum.provinceCodesArr,
					housingSituation: this.$Enum.housingSituationArr,
					carOwnership: this.$Enum.carOwnershipArr,
					relationshipProgressExpectation: this.$Enum.relationshipProgressExpectationArr
				}
				return [map[this.curField]] || []
			}
		},
		mounted() {
			console.log(this.$Enum)
		},
		methods: {
			// getLabelByKey(key) {
			// 	const map = {

			// 	}
			// }
			afterReadImageFile(file) {
				console.log(file)
				this.userInfo.avatar = file.file.url
			},
			clickActionEvent(field) {
				this.curField = field;
				const isShowPickerFields = ['gender', 'bodyType', 'highestEducation', 'incomeRange', 'residenceProvinceCode',
					'domicilePlaceProvinceCode', 'housingSituation', 'carOwnership', 'relationshipProgressExpectation'
				]
				if (isShowPickerFields.includes(field)) {
					this.isShowPicker = true
				} else if (field === 'birthDate') {
					this.isShowDateTime = true;
				}
			},
			confirmPickerEvent({
				value
			}) {
				console.log(value);
				const res = value.length > 0 ? value[0] : []
				if (this.curField === 'gender') {
					this.userInfo.gender = res.id;
					this.genderLabel = this.$Enum.genderMap[res.id]
				} else if (this.curField === 'bodyType') {
					this.userInfo.bodyType = res.id;
					this.bodyTypeLabel = this.$Enum.bodyTypeMap[res.id]
				} else if (this.curField === 'highestEducation') {
					this.userInfo.highestEducation = res.id;
					this.highestEducationLabel = this.$Enum.highestEducationMap[res.id]
				} else if (this.curField === 'incomeRange') {
					this.userInfo.incomeRange = res.id;
					this.incomeRangeLabel = this.$Enum.incomeRangeMap[res.id]
				} else if (this.curField === 'residenceProvinceCode') {
					this.userInfo.residenceProvinceCode = res.id;
					this.userInfo.residenceProvinceName = this.$Enum.provinceCodesMap[res.id]
				} else if (this.curField === 'domicilePlaceProvinceCode') {
					this.userInfo.domicilePlaceProvinceCode = res.id;
					this.userInfo.domicilePlaceProvinceName = this.$Enum.provinceCodesMap[res.id]
				} else if (this.curField === 'housingSituation') {
					this.userInfo.housingSituation = res.id;
					this.userInfo.housingSituationLabel = this.$Enum.housingSituationMap[res.id]
				} else if (this.curField === 'carOwnership') {
					this.userInfo.carOwnership = res.id;
					this.userInfo.carOwnershipLabel = this.$Enum.carOwnershipMap[res.id]
				} else if (this.curField === 'relationshipProgressExpectation') {
					this.userInfo.relationshipProgressExpectation = res.id;
					this.userInfo.relationshipProgressExpectationLabel = this.$Enum.relationshipProgressExpectationMap[res.id]
				}
				this.isShowPicker = false;
			},
			selectDateTimeEvent({
				value
			}) {
				console.log(value)
				this.isShowDateTime = false;
				this.userInfo.birthDate = new Date(value);
				this.birthDateLabel = dayjs(value).format('YYYY-MM-DD')
			}
		},
	}
</script>

<style scoped lang="scss">
	.edit_info_container {
		.base_info {
			margin: 48rpx 48rpx 0 48rpx;
			display: flex;
			gap: 36rpx;
		}

		.name_info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 20rpx;

			.user_name {
				font-size: 48rpx;
				font-weight: 700;
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 15rpx;

				.edit_icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #ffeef2;
				}
			}

			.user_phone {
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(132, 132, 132, 1);
			}
		}
	}
</style>